<template>
  <div class="login-container">
    <van-nav-bar 
    title="登录页" 
    left-text="返回" 
    left-arrow 
    @click-left="$router.back(-1)"
    />
    <van-form @submit="onSubmit">
  <van-field
    v-model="mobile"
    name="mobile"
    label="手机号"
    placeholder="请输入手机号"
    required
    :rules="[{ required: true},
    {pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
    message: '手机号格式不对'}
    ]"
  />
  <van-field
    v-model="code"
    type="text"
    name="code"
    label="验证码"
    placeholder="请输入验证码"
    required
    :rules="[{ required: true},
    {pattern: /^\d{6}$/, message: '验证码格式不对'}
    ]"
  />
  <div style="margin: 16px;">
    <van-button 
    round 
    block 
    type="info" 
    :loading=isLogin 
    loading-text="登录中..."
    native-type="submit"
    >提交</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import { userLogin } from '@/views/user/user.js'

import { saveToken } from '@/utils/token.js'
export default {
  name: 'login',
  data() {
    return {
      mobile:'17683988515',
      code:'246810',
      isLogin:false
    }
  },
  methods: {
    onSubmit(values){
      this.isLogin = true
      console.log(values);
      userLogin(values)
      .then(res=>{
        console.log(res);
        this.$toast.success('登录成功');
        saveToken(res.data.data)
        this.isLogin = false
        this.$router.push('/home')
      })
      .catch(err=>{
        this.$toast.fail('登录失败');
      })
      .then(()=>{
        this.isLogin = false
      })
    }
  },
}
</script>

<style lang="less">
.login-container {
  .van-nav-bar__content {
    background-color: #008bfa;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-nav-bar__text {
      color: #fff;
    }
    .van-icon-arrow-left {
      color: #fff;
    }
  }
}
</style>
